<template>
    <div>
        <navigation></navigation>
        <JwChat-index :config="config" :taleList="taleList" @enter="bindEnter" v-model="inputMsg" :toolConfig="tool" />
        <!-- <JwChat-rightbox :config="rightConfig" @click="rightClick" /> -->

        <footers></footers>
    </div>
</template>
<script>
export default {
  data () {
    return {
      inputMsg: '',
      taleList: [
        {
          "date": "2020/04/25 21:19:07",
          "text": { "text": "一起参加比赛吗？" },
          "mine": false,
          "name": "elistao",
          "img": "https://himg.bdimg.com/sys/portrait/item/cdccc866c1a8ccf4d2bc345a.jpg"
        },
        {
          "date": "2020/04/25 21:19:07",
          "text": { "text": "<audio data-src='https://www.w3school.com.cn/i/horse.mp3'/>" },
          "mine": false,
          "name": "elistao",
          "img": "https://himg.bdimg.com/sys/portrait/item/cdccc866c1a8ccf4d2bc345a.jpg"
        },
        {
          "date": "2020/04/25 21:19:07",
          "text": { "text": "<img data-src='https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1255677004,3755508600&fm=26&gp=0.jpg'/>" },
          "mine": false,
          "name": "elistao",
          "img": "https://himg.bdimg.com/sys/portrait/item/cdccc866c1a8ccf4d2bc345a.jpg"
        },
        {
          "date": "2020/04/16 21:19:07",
          "text": { "text": "<video data-src='https://www.w3school.com.cn/i/movie.mp4' controls='controls' />" },
          "mine": true,
          "name": "marsblue",
          "img": "../image/three.jpeg"
        },
      ],
      tool: {
        show: ['file', 'history', 'img'],
        callback: this.toolEvent
      },
      config: {
        img: 'https://himg.bdimg.com/sys/portrait/item/cdccc866c1a8ccf4d2bc345a.jpg',
        name: 'JwChat',
        dept: 'elistao',
        callback: this.headerEvent
      },
    }
  },
  methods: {
    bindEnter () {
      const msg = this.inputMsg
      if (!msg) return;
      const msgObj = {
        "date": "2020/05/20 23:19:07",
        "text": { "text": msg },
        "mine": true,
        "name": "JwChat",
        "img": "../image/three.jpeg"
      }
      this.list.push(msgObj)
    },
    toolEvent (type) {
      console.log('tools', type)
    },
    headerEvent (type) {
      console.log('header', type)
    },
  }
}
</script>
